<script setup>
import { storeToRefs } from 'pinia';
import { toRefs } from 'vue';
import useStore from './store'
const { counter } = useStore()
// toRefs 是 vue 提供，可以把所有的属性和方法都转响应式
// storeToRefs 是 pinia 提供，只转换 属性，不转方法
const { count, double, add, addNum, addAsync } = toRefs(counter)
// const { count, double, add, addNum, addAsync } = storeToRefs(counter)

</script>

<template>
  <h1>{{ counter }}</h1>
  <div>{{ count }}</div>
  <div>{{ double }}</div>
  <button @click="add">点我+1</button>
  <button @click="addNum(5)">点我+5</button>
  <button @click="addAsync(10)">点我异步+10</button>
</template>

